"use client";

import { useState } from "react";
import Link from "next/link";
import { useRouter } from "next/navigation";
import { ArrowLeft, Mail, Lock, Loader } from "lucide-react";
import { useAuth } from "@/contexts/auth-context";

export default function LoginPage() {
  const router = useRouter();
  const { login } = useAuth();
  const [isLoading, setIsLoading] = useState(false);
  const [error, setError] = useState<string>("");

  async function handleSubmit(event: React.FormEvent<HTMLFormElement>) {
    event.preventDefault();
    setIsLoading(true);
    setError("");

    const formData = new FormData(event.currentTarget);
    
    try {
      await login(
        formData.get("email") as string,
        formData.get("password") as string
      );
      router.push("/dashboard");
    } catch (error) {
      setError(error instanceof Error ? error.message : "登录失败");
    } finally {
      setIsLoading(false);
    }
  }

  return (
    <div className="min-h-screen flex items-center justify-center bg-gradient-to-b from-background to-muted/50">
      <div className="w-full max-w-md mx-auto p-6 space-y-8">
        {/* 返回按钮 */}
        <Link 
          href="/"
          className="inline-flex items-center text-sm text-muted-foreground hover:text-foreground transition-colors"
        >
          <ArrowLeft className="w-4 h-4 mr-2" />
          返回首页
        </Link>

        {/* 标题 */}
        <div className="space-y-2 text-center">
          <h1 className="text-3xl font-bold tracking-tight">欢迎回来 👋</h1>
          <p className="text-muted-foreground">
            登录您的账号开启健康之旅 ✨
          </p>
        </div>

        {/* 登录表单 */}
        <form onSubmit={handleSubmit} className="space-y-6">
          <div className="space-y-4">
            <div className="space-y-2">
              <label htmlFor="email" className="text-sm font-medium flex items-center gap-2">
                <Mail className="w-4 h-4" />
                邮箱地址
              </label>
              <div className="relative">
                <input
                  id="email"
                  name="email"
                  type="email"
                  required
                  className="w-full px-3 py-2 pl-10 border rounded-lg bg-background focus:outline-none focus:ring-2 focus:ring-primary/50 transition-all"
                  placeholder="请输入邮箱"
                />
                <span className="absolute left-3 top-1/2 -translate-y-1/2 text-muted-foreground">
                  📧
                </span>
              </div>
            </div>
            <div className="space-y-2">
              <label htmlFor="password" className="text-sm font-medium flex items-center gap-2">
                <Lock className="w-4 h-4" />
                登录密码
              </label>
              <div className="relative">
                <input
                  id="password"
                  name="password"
                  type="password"
                  required
                  className="w-full px-3 py-2 pl-10 border rounded-lg bg-background focus:outline-none focus:ring-2 focus:ring-primary/50 transition-all"
                  placeholder="请输入密码"
                />
                <span className="absolute left-3 top-1/2 -translate-y-1/2 text-muted-foreground">
                  🔒
                </span>
              </div>
            </div>
          </div>

          {/* 错误提示 */}
          {error && (
            <div className="p-3 text-sm text-destructive bg-destructive/10 rounded-lg flex items-center gap-2">
              <span>❌</span>
              {error}
            </div>
          )}

          {/* 登录按钮 */}
          <button
            type="submit"
            disabled={isLoading}
            className="w-full py-2.5 text-sm font-medium text-primary-foreground bg-primary rounded-lg hover:bg-primary/90 focus:outline-none focus:ring-2 focus:ring-primary/50 disabled:opacity-50 disabled:cursor-not-allowed transition-all"
          >
            {isLoading ? (
              <span className="flex items-center justify-center gap-2">
                <Loader className="w-4 h-4 animate-spin" />
                登录中...
              </span>
            ) : (
              <span className="flex items-center justify-center gap-2">
                <span>🚀</span>
                登录
              </span>
            )}
          </button>

          {/* 注册链接 */}
          <div className="text-center text-sm">
            <span className="text-muted-foreground">
              还没有账号？
            </span>
            {" "}
            <Link 
              href="/auth/register"
              className="font-medium text-primary hover:underline"
            >
              立即注册 ✨
            </Link>
          </div>
        </form>
      </div>
    </div>
  );
} 